<template>
  <el-card>
    <div slot="header" class="card-header">
      <span>{{ this.$route.meta.title }}</span>
    </div>
    <el-card shadow="never" class="echart mgb">
      <EchartBar></EchartBar>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="12" class="mgb">
        <el-card shadow="never">
          <div slot="header">审计专题模型建设明细</div>
          <Table :tableData="tableDataA"></Table>
        </el-card>
      </el-col>
      <el-col :span="12" class="mgb">
        <el-card shadow="never">
          <div slot="header">审计专题界面建设明细</div>
          <Table :tableData="tableDataB"></Table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" class="mgb">
        <el-card shadow="never">
          <div slot="header">审计专题数据源拓展明细</div>
          <Table :tableData="tableDataC"></Table>
        </el-card>
      </el-col>
      <el-col :span="12" class="mgb">
        <el-card shadow="never">
          <div slot="header">审计专题实地核查明细</div>
          <Table :tableData="tableDataD"></Table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" class="mgb">
        <el-card shadow="never">
          <div slot="header">审计专题整改问责明细</div>
          <Table :tableData="tableDataE"></Table>
        </el-card>
      </el-col>
      <el-col :span="12" class="mgb">
        <el-card shadow="never">
          <div slot="header">系统功能建设</div>
          <Table :tableData="tableDataF"></Table>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import EchartBar from './components/EchartBar'
import Table from '@/components/Table'
export default {
  components: {
    EchartBar,
    Table
  },

  data() {
    return {
      tableDataA: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '模型名称',
            width: '200px'
          },
          {
            prop: 'colC',
            label: '上线时间'
          },
          {
            prop: 'colD',
            label: '状态'
          }
        ],
        row: [
          {
            colA: '1',
            colB: '个人用户长期高额欠费',
            colC: '202001',
            colD: '在用'
          },
          {
            colA: '2',
            colB: '集团产品用户长期高额欠费',
            colC: '202001',
            colD: '在用'
          },
          {
            colA: '3',
            colB: '疑似虚假宽带用户',
            colC: '202001',
            colD: '在用'
          },
          {
            colA: '4',
            colB: '专线开通后未及时计费',
            colC: '202001',
            colD: '在用'
          },
          {
            colA: '5',
            colB: '养卡套利',
            colC: '201701',
            colD: '在用'
          }
        ]
      },
      tableDataB: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '审计专题界面',
            width: '200px'
          },
          {
            prop: 'colC',
            label: '上线时间'
          },
          {
            prop: 'colD',
            label: '状态'
          }
        ],
        row: [
          {
            colA: '1',
            colB: '客户欠费',
            colC: '202001',
            colD: '在用'
          },
          {
            colA: '2',
            colB: '宽带业务管理违规',
            colC: '202001',
            colD: '在用'
          },
          {
            colA: '3',
            colB: '集团专线管理违规',
            colC: '202001',
            colD: '在用'
          },
          {
            colA: '4',
            colB: '终端套利',
            colC: '202001',
            colD: '在用'
          },
          {
            colA: '5',
            colB: '养卡套利',
            colC: '201701',
            colD: '在用'
          }
        ]
      },
      tableDataC: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '数据归属域'
          },
          {
            prop: 'colC',
            label: '数据源数量（个）'
          }
        ],
        row: [
          {
            colA: '1',
            colB: 'B域',
            colC: '89'
          },
          {
            colA: '2',
            colB: 'O域',
            colC: '32'
          },
          {
            colA: '3',
            colB: 'M域',
            colC: '58'
          }
        ]
      },
      tableDataD: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '专题名称',
            width: '200px'
          },
          {
            prop: 'colC',
            label: '核查公司'
          },
          {
            prop: 'colD',
            label: '核查时间'
          }
        ],
        row: [
          {
            colA: '1',
            colB: '个人用户长期高额欠费',
            colC: '北京公司',
            colD: '202001'
          },
          {
            colA: '2',
            colB: '集团产品用户长期高额欠费',
            colC: '北京公司',
            colD: '202001'
          },
          {
            colA: '3',
            colB: '疑似虚假宽带用户',
            colC: '上海公司',
            colD: '202001'
          },
          {
            colA: '4',
            colB: '专线开通后未及时计费',
            colC: '北京公司',
            colD: '202001'
          },
          {
            colA: '5',
            colB: '养卡套利',
            colC: '上海公司',
            colD: '201701'
          }
        ]
      },
      tableDataE: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '专题名称',
            width: '200px'
          },
          {
            prop: 'colC',
            label: '整改公司数量'
          },
          {
            prop: 'colD',
            label: '问责公司数量'
          },
          {
            prop: 'colE',
            label: '审计周期'
          }
        ],
        row: [
          {
            colA: '1',
            colB: '个人用户长期高额欠费',
            colC: '5',
            colD: '1',
            colE: '202001'
          },
          {
            colA: '2',
            colB: '集团产品用户长期高额欠费',
            colC: '2',
            colD: '1',
            colE: '202001'
          },
          {
            colA: '3',
            colB: '疑似虚假宽带用户',
            colC: '3',
            colD: '2',
            colE: '202001'
          },
          {
            colA: '4',
            colB: '专线开通后未及时计费',
            colC: '6',
            colD: '4',
            colE: '202001'
          },
          {
            colA: '5',
            colB: '养卡套利',
            colC: '1',
            colD: '0',
            colE: '201701'
          }
        ]
      },
      tableDataF: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '系统功能建设',
            width: '200px'
          },
          {
            prop: 'colC',
            label: '归属功能模块'
          },
          {
            prop: 'colD',
            label: '上线时间'
          }
        ],
        row: [
          {
            colA: '1',
            colB: '审计报告管理',
            colC: '审计管理',
            colD: '202001'
          },
          {
            colA: '2',
            colB: '审计专题建设情况',
            colC: '审计管理',
            colD: '202001'
          },
          {
            colA: '3',
            colB: '数据质量管理',
            colC: '审计管理',
            colD: '202001'
          },
          {
            colA: '4',
            colB: '用户管理',
            colC: '系统管理',
            colD: '202001'
          },
          {
            colA: '5',
            colB: '角色管理',
            colC: '系统管理',
            colD: '201701'
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mgb {
  margin-bottom: 20px;
}
.echart {
  /deep/ .el-card__body {
    height: 400px !important;
  }
}
</style>
